<template>
	<view class="pb20">
		<u-empty text="暂无数据" mode="list" v-if="list.length<1"></u-empty>
		<view class="pl30 pr30 flex flex-wrap" v-else>
					<view v-for="(item, index) in list" :key="index" class="mr30 mt30 itembox">
						<image :src="item.image" class="radius16 h420 coverimg w-max" mode="aspectFill"
							@click="toDetail(item)"></image>
						<image src="~@/static/image/index/play.png" class="playbtn"></image>
						<!-- <u-icon name="photo"></u-icon> -->
						<view class="fs26 mt20 mb20 shenglueMore">{{item.name}}</view>
						<view class="flex row-between">
							<view class="flex">
								<image v-if="item.avatar" :src="item.avatar"
									class="w40 h40 radius40 mr10"></image>
								<text v-if="item.member && item.member.name" class="color6 fs26">{{item.member.name}}</text>
							</view>
							<view class="" @click="videoGive(item)">
								<u-icon name="heart" v-if="item.is_give == 0"></u-icon>
								<u-icon name="heart-fill" v-else color="#D23030"></u-icon>
								<text class="ml10">{{item.give}}</text>
							</view>
						</view>
					</view>
		</view>
			<view class="">
				<uni-fab :popMenu="false" @fabClick="trigger" :horizontal='"right"'></uni-fab>
			</view>
	</view>
</template>

<script>
	import uniFab from '@/components/uni-fab/uni-fab.vue'
	export default {
		name:'follwVideoList',
		components: {
			uniFab
		},
		onLoad(opt) {
			this.member_id=opt.member_id
			
		},
		data() {
			return {
				member_id:'',
				loadStatus: 'loadmore',
				list: [],
				type: 2,
				page: 1,
				pattern: {
					color: '#ffffff'
				},
				content: [{
					iconPath: '/static/add.png'
				}]
			};
		},
		onShow() {
			this.getData()
		},
		methods: {
			trigger() {
				uni.navigateTo({
					url: '/pages/shortVideo/release'
				})
			},
			// 详情页
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/shortVideo/detail?id=' + item.id
				})
			},
			// 点赞
			videoGive(item) {
				this.$api.videoGive({
					id: item.id
				}).then(res => {
					this.$tool.msg(res.msg)
					item.is_give = item.is_give == 0 ? '1' : '0'
				})
			},
			// 获取数据
			getData(cd) {
				this.$api.give_video({
					member_id:this.member_id,
					page: this.page,
					size: 10
				}).then(res => {
					// if (res.data.length > 0) {
					// 	this.list.push(...res.data)
					// 	this.page += 1
					// }
					cd?this.list=[...this.list,...res.data] : this.list=res.data
				})
			},
		},
		onReachBottom() {
			this.page++
			this.getData('cd')
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.topbg {
		background: #D23030;
	}
	.tabbox {
		width: 100%;
		height: 52rpx;
		background-color: #D23030;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	.activeTxt {
		font-size: 34rpx;
	}

	.demo-warter {
		border-radius: 16rpx;
		margin: 10rpx;
		background-color: #ffffff;
		padding: 16rpx;
		position: relative;
	}

	.itembox {
		position: relative;
		width: 47%;
	}
	.itembox:nth-child(even) {
		margin-right: 0rpx !important;
	}

	.playbtn {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		width: 30rpx;
		height: 30rpx;
	}
</style>
